<ion-header>
  <ion-toolbar color="primary">
  <ion-navbar>
    <ion-title>
      装货-货物扫描
    </ion-title>
  </ion-navbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-card-title>
        请扫描货物二维码
      </ion-card-title>
     <!-- <ion-row>
        <input value="" id="scanmateriel" col-12 type="text" placeholder="请将光标移至此处或点击开始扫描按钮" [(ngModel)]="qrcode"
               (ngModelChange)="infoChange($event)"
               onclick="javascript:document.querySelector('#scanmateriel').value=''">
      </ion-row>-->
      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan()" id="scanmaterielbtn" ><ion-icon name="barcode"></ion-icon>&nbsp;开始扫描</button>

        <!--<button ion-button full (click)="scan()"  id="scanmaterielbtn"
                onclick="javascript:document.querySelector('#scanmateriel').value=''">开始扫描
        </button>-->
      </ion-row>
    </ion-card-content>
  </ion-card>


  <ion-card class="hides" hidden>
    <ion-card-content>
      <ion-card-title>
        容器余量信息
      </ion-card-title>
      <ion-row>
        <ion-col col-2.5 text-left>
          <h5>容器编码:</h5>
        </ion-col>
        <ion-col col-2.5 text-right>
          <h5>{{materiel.containerCode}}</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2.5 text-left>
          <h5>容器名称:</h5>
        </ion-col>
        <ion-col col-2.5 text-right>
          <h5>{{materiel.containerName}}</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-2.5 text-left>
          <h5>容器类型:</h5>
        </ion-col>
        <ion-col col-2.5 text-right>
          <h5>{{materiel.containerType}}</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2.5 text-left>
          <h5>已装货物:</h5>
        </ion-col>
        <ion-col col-2.5 text-right>
          <h5>{{materiel.materielCount}}件</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-2.5 text-left>
          <h5>目前承重:</h5>
        </ion-col>
        <ion-col col-2.5 text-right>
          <h5>{{materiel.extraWeight}}kg</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2.5 text-left>
          <h5>剩余承重:</h5>
        </ion-col>
        <ion-col col-2.5 text-right>
          <h5 *ngIf="(materiel.containerBearWeight-materiel.extraWeight)>=0">
            {{materiel.containerBearWeight-materiel.extraWeight | number : '1.0-3'}}kg</h5>
          <h5 *ngIf="(materiel.containerBearWeight-materiel.extraWeight)<0">
            <em style="color: #f53d3d">超出</em>{{materiel.extraWeight-materiel.containerBearWeight | number : '1.0-3'}}kg</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-6 text-left>
          <h5>总装载体积:</h5>
        </ion-col>
        <ion-col col-6 text-right>
          <h5>(预计){{materiel.containerLength*materiel.containerHeight*materiel.containerWidth/1000000 | number : '1.0-3'}}m³</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-6 text-left>
          <h5>已装载体积:</h5>
        </ion-col>
        <ion-col col-6 text-right>
          <h5 *ngIf="((materiel.containerLength*materiel.containerHeight*materiel.containerWidth)-materiel.extraVolume)>=0">
            (预计){{materiel.extraVolume/1000000 | number : '1.0-6'}}m³</h5>
          <h5 *ngIf="((materiel.containerLength*materiel.containerHeight*materiel.containerWidth)-materiel.extraVolume)<0">
            <em style="color: #f53d3d">超出</em>(预计){{(materiel.extraVolume-(materiel.containerLength*materiel.containerHeight*materiel.containerWidth))/1000000 | number : '1.0-6'}}m³</h5>
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card class="hides" hidden>
    <ion-card-content>
      <ion-card-title>
        货物基本信息
      </ion-card-title>
      <ion-row>
        <ion-col col-2 text-left>
          <h5>编码:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielCode}}</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2 text-left>
          <h5>名称:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielName}}</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-2 text-left>
          <h5>净重:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielEmptyWeight}}kg</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2 text-left>
          <h5>毛重:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielGrossWeight}}kg</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-2 text-left>
          <h5>长:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielLength}}cm</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2 text-left>
          <h5>宽:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielWidth}}cm</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-2 text-left>
          <h5>高:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{materiel.materielHeight}}cm</h5>
        </ion-col>
        <ion-col col-1><h4>丨</h4></ion-col>
        <ion-col col-2 text-left>
          <h5>体积:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{(materiel.materielLength*materiel.materielWidth*materiel.materielHeight)/1000000| number : '1.0-6'}}m³</h5>
        </ion-col>
      </ion-row>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-footer>
  <ion-row>
    <ion-col col-4>
      <button ion-button [disabled]="disTag" full (click)="scan()" >继续扫描</button>
    </ion-col>
    <ion-col col-4>
      <button ion-button [disabled]="disTag" full (click)="toPhoto()" id="takePhoto">拍照上传</button>
    </ion-col>
    <ion-col col-4>
      <button ion-button full color="light" (click)="goBack()">返回</button>
    </ion-col>
  </ion-row>
</ion-footer>



